<template>
  <div class="model-container">
    <div class="listName">系统用户管理</div>
    <!--搜索-->
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true"></el-button>
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false"></el-button>
        </div>
      </div>
      <el-collapse-transition>
        <div class="cardbody" v-show="searchShow">
          <el-row :gutter="10">
            <el-col :xl="5" :lg="6" :md="6" :sm="8" >
              <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">用户名</el-col>
              <el-col :xl="17" :lg="17" :md="16" :sm="16">
                <el-input placeholder="请输入用户名"/>
              </el-col>
            </el-col>
          </el-row>
          <div class="cardfooter">
            <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
            <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
          </div>
        </div>
      </el-collapse-transition>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">
          <el-button type="primary" plain @click="add">新增</el-button>
          <el-button type="danger" plain @click="add">删除</el-button>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" empty-text="暂无数据" style="width: 100%">

          <el-table-column type="selection" width="55"/>

          <el-table-column label="目的地" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>

          <el-table-column prop="name" label="创建时间" width="120"/>

          <el-table-column prop="address" label="备注"/>

          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">

              <el-button type="primary" icon="el-icon-edit" circle class="table-icon" @click="edit(scope.row)"/>

              <el-button type="primary" circle class="table-icon" @click="check(scope.row)"><i class="iconfont icon-chakan"></i></el-button>

              <el-button type="warning" circle icon="el-icon-delete" class="table-icon popver-btn"/>

            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :before-close="handleClose"
      width="30%">
      <div class="dialog-body-content">
        <el-row :gutter="15">
          <el-col :span="24">
            <el-row :gutter="15" class="content">
              <el-col :span="8" class="content-left"><label><span class="fill">*</span>目的地</label></el-col>
              <el-col :span="16" class="content-right">
                <el-select size="small" placeholder="请选择">
                  <el-option
                    v-for="item in place"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"/>
                </el-select>
              </el-col>
            </el-row>
            <el-row :gutter="15" class="content">
              <el-col :span="8" class="content-left"><label><span class="fill">*</span>备注</label></el-col>
              <el-col :span="16" class="content-right">
                <div class="title" style="float: left;margin-right: 15px;position: relative;width: 100%">
                  <el-input type="text" size="small" placeholder="请输入备注"/>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="btns-wrapper">
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button :loading="buttonState" type="primary" size="small" @click="submmitFun">保 存</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as shop from '../../api/shop'
  export default {
    data() {
      return {
        // 页面搜索
        seacherParam: {},
        searchShow:false,
        pageNo: 1,
        pageSize: 10,
        rowCount: 20, // 总条数
        // 弹框
        dialogType: 1, // 1--增加  2--编辑  3--查看
        dialogState: false,
        // 按钮状态
        buttonState: false,
        // 列表数据
        dataOption: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        // 提交内容
        dialogBindData: {},
        place:[]
      }
    },
    computed: {
      dialogTitle() {
        if (this.dialogType === 1) {
          return '新增目的地'
        }
        if (this.dialogType === 2) {
          return '编辑目的地'
        } else {
          return '查看'
        }
      }
    },
    beforeMount() {
      // this.getList();
    },
    methods: {
      seachFun(){

      },
      getList(cb) {
        const param = {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        shop.getLogList(param).then(res => {
          console.log('res', res)
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data.list
          // 初始化分页数据
          this.rowCount = res.data.data.total
          this.pageSize = res.data.data.pageSize
        })
      },
      // 新增
      add() {
        this.dialogType = 1
        this.dialogState = true
      },
      // 编辑
      edit(data) {
        this.dialogType = 2
        this.dialogState = true
        // this.reBindData(data)
      },
      // 提交
      submmitFun() {
        const param = {}

        if (this.dialogType !== 1) {
          param.id = this.dialogBindData.id
        }
        this.$refs.dialogBindData.validate((valid) => {
          if (valid) {
            if (this.dialogType === 1) {
              shop.getLogList(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.buttonState = false
                this.getList()
                this.handleClose()
              })
            } else {
              shop.getLogList(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.buttonState = false
                this.getList()
                this.handleClose()
              })
            }
          } else {
            return false
          }
        })
      },
      // 反显
      reBindData(data) {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = data[key]
        }
      },
      // 重置
      resetFun() {
        this.$refs.seacherParam.resetFields()
        this.getList()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        // this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNum = val
        // this.getList()
      },
      handleClose() {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = ''
        }
        this.dialogState = false
        this.$refs.dialogBindData.clearValidate()
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
